import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';

class Content9 extends React.PureComponent {
  render() {
    const { ...props } = this.props;
    delete props.dataSource;
    delete props.isMobile;
    
    return (
      <div {...props} className="home-page-wrapper content9-wrapper">
        <div className="home-page content9">
          <div className="title-wrapper">
            <img src="/images/PiqyziYmvbgAudYfhuBr.svg" className="title-image" alt="title" />
            <h1 className="title-h1">会议日程</h1>
          </div>
          <div className="timeline">
            <OverPack className="block-wrapper" playScale={0.3}>
              <QueueAnim
                className="image-wrapper"
                key="image"
                type="bottom"
                leaveReverse
                delay={0}
              >
                <div className="block-img">
                  <img src="/images/SlFgHDtOTLzccvFrQHLg.png" alt="img" />
                </div>
                <div key="name" className="name-wrapper">
                  <div className="block-name">姓名</div>
                  <div className="block-post">公司 职位</div>
                </div>
              </QueueAnim>

              <QueueAnim
                key="text"
                leaveReverse
                delay={0}
                className="text-wrapper"
              >
                <div className="block-time">09:00 - 10:00</div>
                <h2 className="block-title">
                  <i className="block-icon">
                    <img src="/images/qJnGrvjXPxdKETlVSrbe.svg" alt="img" />
                  </i>
                  开幕致辞
                </h2>
                <div className="block-content"></div>
              </QueueAnim>
            </OverPack>
            
            <OverPack className="block-wrapper" playScale={0.3}>
              <QueueAnim
                className="image-wrapper"
                key="image"
                type="bottom"
                leaveReverse
                delay={0}
              >
                <div className="block-img">
                  <img src="/images/SlFgHDtOTLzccvFrQHLg.png" alt="img" />
                </div>
                <div key="name" className="name-wrapper">
                  <div className="block-name">姓名</div>
                  <div className="block-post">公司 职位</div>
                </div>
              </QueueAnim>

              <QueueAnim
                key="text"
                leaveReverse
                delay={0}
                className="text-wrapper"
              >
                <div className="block-time">09:00 - 10:00</div>
                <h2 className="block-title">
                  <i className="block-icon">
                    <img src="/images/QviGtUPvTFxdhsTUAacr.svg" alt="img" />
                  </i>
                  演示标题 - XYZ
                </h2>
                <div className="block-content">
                  经过近 3 年的打磨，在助力中台产品研发效能提升的目标之上，包含设计语言、UI 资产、可视化以及产品体验相关的蚂蚁中台设计体系正在逐步成型。此次分享包含两部分，在介绍蚂蚁设计体系的同时，也会和大家分享我们在设计语言的部分探索。
                </div>
              </QueueAnim>
            </OverPack>
            
            <OverPack className="block-wrapper" playScale={0.3}>
              <QueueAnim
                className="image-wrapper"
                key="image"
                type="bottom"
                leaveReverse
                delay={0}
              >
                <div className="block-img">
                  <img src="/images/SlFgHDtOTLzccvFrQHLg.png" alt="img" />
                </div>
                <div key="name" className="name-wrapper">
                  <div className="block-name">姓名</div>
                  <div className="block-post">公司 职位</div>
                </div>
              </QueueAnim>

              <QueueAnim
                key="text"
                leaveReverse
                delay={0}
                className="text-wrapper"
              >
                <div className="block-time">09:00 - 10:00</div>
                <h2 className="block-title">
                  <i className="block-icon">
                    <img src="/images/QviGtUPvTFxdhsTUAacr.svg" alt="img" />
                  </i>
                  演示标题 - XYZ
                </h2>
                <div className="block-content">
                  经过近 3 年的打磨，在助力中台产品研发效能提升的目标之上，包含设计语言、UI 资产、可视化以及产品体验相关的蚂蚁中台设计体系正在逐步成型。此次分享包含两部分，在介绍蚂蚁设计体系的同时，也会和大家分享我们在设计语言的部分探索。
                </div>
              </QueueAnim>
            </OverPack>
            
            <OverPack className="block-wrapper" playScale={0.3}>
              <QueueAnim
                className="image-wrapper"
                key="image"
                type="bottom"
                leaveReverse
                delay={0}
              >
                <div className="block-img">
                  <img src="/images/SlFgHDtOTLzccvFrQHLg.png" alt="img" />
                </div>
                <div key="name" className="name-wrapper">
                  <div className="block-name">姓名</div>
                  <div className="block-post">公司 职位</div>
                </div>
              </QueueAnim>

              <QueueAnim
                key="text"
                leaveReverse
                delay={0}
                className="text-wrapper"
              >
                <div className="block-time">09:00 - 10:00</div>
                <h2 className="block-title">
                  <i className="block-icon">
                    <img src="/images/agOOBdKEIJlQhfeYhHJc.svg" alt="img" />
                  </i>
                  演示标题 - XYZ
                </h2>
                <div className="block-content">
                  经过近 3 年的打磨，在助力中台产品研发效能提升的目标之上，包含设计语言、UI 资产、可视化以及产品体验相关的蚂蚁中台设计体系正在逐步成型。此次分享包含两部分，在介绍蚂蚁设计体系的同时，也会和大家分享我们在设计语言的部分探索。
                </div>
              </QueueAnim>
            </OverPack>
          </div>
        </div>
      </div>
    );
  }
}

export default Content9;
